<template>
  <n-config-provider :theme-overrides="themeOverrides">
    <div class="login-container">


      <n-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          :show-label="false"
          class="login-form"
          auto-complete="on"
          label-position="left"
      >
        <h3 class="title">{{webSiteName}}</h3>
        <n-form-item path="username">
          <span class="svg-container svg-container_login">
              <SIcon icon="Person" :size="16"/>
          </span>
          <n-input
              v-model:value="loginForm.username"
              ref="userNameInput"
              name="username"
              type="text"
              auto-complete="off"
              placeholder="账号"
              @keyup.enter="handleLogin"
          />
        </n-form-item>
        <n-form-item path="password">
          <span class="svg-container">
              <SIcon icon="LockClosedOutline" size="16"/>
          </span>
          <n-input
              :type="pwdType"
              v-model:value="loginForm.password"
              name="password"
              auto-complete="on"
              placeholder="密码"
              @keyup.enter="handleLogin"
          />
          <span class="show-pwd" @click="showPwd">
              <SIcon :icon="pwdType !== 'password' ? 'Eye': 'EyeOff'"/>
          </span>
        </n-form-item>
        <n-form-item path="code">
          <span class="svg-container">
              <SIcon icon="ShieldCheckmarkOutline"/>
          </span>
          <n-input
              v-model:value="loginForm.code"
              auto-complete="off"
              placeholder="验证码"
              style="width: 55%"
              @keyup.enter="handleLogin"
          >
          </n-input>
          <div class="login-code">
            <img
                :src="codeUrl"
                @click="getCode()"
                class="login-code-img"
                title="看不清？点击更换"
                alt="重新获取"
             />
          </div>
        </n-form-item>
  <!--      <n-checkbox v-model="loginForm.isRememberMe" style="margin:0px 0px 25px 0px;"><span style="color: #eee">七天免登录</span></n-checkbox>-->
        <n-checkbox
            v-model:checked="loginForm.rememberMe"
            style="margin: 0px 0px 25px 0px"
        >记住密码</n-checkbox>
        <n-form-item>
          <n-button
              :loading="loading"
              type="primary"
              style="width:100%;"
              @click.prevent="handleLogin"
          >登 录</n-button>
        </n-form-item>
      </n-form>
      <vue-particles
          id="bg-particles"
          :particlesInit="particlesInit"
          :particlesLoaded="particlesLoaded"
          :options="particles"
      />
    </div>
  </n-config-provider>
</template>

<script setup>
import Login from "@/views/admin/login/login";
import {NForm,NFormItem,NButton,NCheckbox,NInput,NIcon,NConfigProvider } from "naive-ui"
import { ParticlesComponent as VueParticles } from 'particles.vue3'
import {ref} from "vue";
// 背景动画设置
import {particles} from './particles'
import { loadFull } from "tsparticles";
import useSettingStore from "@/stores/admin/useSettingStore";
const particlesRef = ref(particles)
/**
 * 调整表单主题
 */
const inputThemeOverrides = {
  border : '0px',
  color : 'transparent',
  colorDisabled : 'transparent',
  colorFocus : 'transparent',
  colorFocusWarning : 'transparent',
  colorFocusError : 'transparent',
  borderHover : '0px',
  borderDisabled : '0px',
  borderFocus : '0px transparent',
  borderWarning : '0px',
  borderHoverWarning : '0px',
  borderFocusWarning : '0px',
  borderError : '0px',
  borderHoverError : '0px',
  borderFocusError : '0px',
  boxShadowFocus : 'transparent',
  boxShadowFocusWarning : 'transparent',
  boxShadowFocusError : 'transparent',
}
const themeOverrides = {
  Input : inputThemeOverrides,
  Checkbox : {
    textColor:'#606266'
  }
}
const webSiteName = useSettingStore().title
const pwdType = ref("password")
const {
  loginFormRef, loginForm, loginRules, codeUrl, loading, getCode, handleLogin
} = Login();
const showPwd = () => {
  if (pwdType.value === "password"){
    pwdType.value = 'text'
  }else {
    pwdType.value = "password"
  }
}
const particlesInit = async (engine) => {
  await loadFull(engine);
};

const particlesLoaded = async (container) => {
  console.log("Particles container loaded", container);
};

</script>

<style rel="stylesheet/scss" lang="scss">
$bg: #2d3a4b;
$light_gray: #eee;
#bg-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}
/* reset element-ui css */
.login-container {
  .n-input {
    display: inline-block;
    height: 47px;
    width: 85%;
    input {
      background: transparent;
      border: 0;
      -webkit-appearance: none;
      border-radius: 0px;
      color: $light_gray;
      height: 47px;
      padding: 12px 5px 12px 15px;

      &:-webkit-autofill {
        -webkit-box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: #fff !important;
      }
    }
    .n-input__placeholder {
      padding: 12px 5px 12px 15px;
    }
    .n-input-wrapper{
      width: 100%;
      border-radius: 0;
      background-color: rgba(0, 0, 0, 0);
      box-shadow: 0 0 0 0;
    }
  }
  .n-form-item-blank {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: $bg;
  .login-form {
    position: absolute;
    left: 0;
    right: 0;
    width: 520px;
    max-width: 100%;
    padding: 35px 35px 15px 35px;
    margin: 120px auto;
    z-index: 99999;
  }
  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;
    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }
  .svg-container {
    padding: 0 0 0 15px;
    color: $dark_gray;
    vertical-align: middle;
    width: 30px;
    display: inline-block;
    &_login {
      font-size: 20px;
    }
  }
  .title {
    font-size: 26px;
    font-weight: 400;
    color: $light_gray;
    margin: 0px auto 40px auto;
    text-align: center;
    font-weight: bold;
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 12px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>
